Trening Shiny App repopsi

Tijana Blagojev - EUI/R-Ladies Belgrade
Duško Medić - Centar za održive zajednice

Cilj treninga

  • Da se upoznamo sa osnovama Shiny aplikacije.

  • Da vidimo kako se pravi web aplikacija repopsi.

  • Da vidimo kako se publikuje aplikacija koristeći Shinyapps.io.

Šta je Shiny web aplikacija?

Shiny je paket RStudio-a koji se koristi za pravljenje interaktivnih web aplikacija uz pomoć R programskog jezika.

Možete da napravite aplikaciju na posebnoj web stranici kao što je slučaj sa repopsi ili da vam bude deo R Markdown dokumenta ili da pravite takozvane Shiny dashboards. Možete takođe da unapredite Shiny aplikaciju uz pomoć CSS tema, htmlwidgets-a, ili JavaScript-a.

Shiny aplikacije se lako kreiraju. Nisu neophodne veštine za izradu web stranica. Ali ukoliko ih imate još bolje.

Napravićemo novi projekat

Napravićemo novi projekat

Napravićemo novi projekat

Otvorićemo Shiny aplikaciju

Izgled Shiny aplikacije

app.R

Kod za Shiny aplikaciju ima tri dela:

  1. global kod
  • Gde se importuju biblioteke, pristupa izvoru podataka i gde se podaci sredjuju
  1. UI kod
  • UI (User interface) gde se prilagodjava izgled aplikacije
  1. Server kod
  • Kod koji pokreće aplikaciju, gde se prava magija dešava

Da vidimo kako izgleda pravljenje shiny aplikacije

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Prvo ćemo instalirati shiny paket i ostale pakete koji su neophodni za aplikaciju.

install.packages("shiny") #za shiny aplikaciju

install.packages("shinythemes") # teme koje ulepšavaju izgled aplikacije

install.packages("shinyWidgets") # uredjivanje dugmića ili nekih drugih delova aplikacije

install.packages("tidyverse") # za obradu i pripremanje podataka za vizuelni prikaz

install.packages("DT") # odličan paket za pravljenje tabela

install.packages("gsheet") # koristi se za uvoz google sheets

install.packages("writexl") # koristi se u delu za skidanje podataka u excel formatu

install.packages("httr") # služi za preuzimanje i skidanje podataka u csv-u sa linka 

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Potom ćemo uvesti biblioteke koje su nam potrebne.

library (shiny)

library (shinythemes)

library (shinyWidgets)

library (tidyverse)

library (gsheet)

library (writexl)

library (httr)

Global kod

Global deo preuzimanje podataka

Za ovo koristimo gsheet biblioteku.

repopsi <- gsheet2tbl("https://docs.google.com/spreadsheets/d/1A6O1d0S7iBYsKVbdBP9AWdYXMWvrN_lCh_oMldCmNsA/edit#gid=0")

Global deo prikaz podataka

Uredjivanje kolona

repopsi <- repopsi[-c(1:8),]

my.names <- repopsi[1,]

colnames(repopsi) <- my.names

repopsi <- repopsi[-1,]

repopsi <- repopsi[,-1]

colnames(repopsi)<-gsub(".$","",colnames(repopsi))

Tabela posle uredjivanja kolona

Važna napomena

  • Da bi gsheet2tbl funkcionisao, neophodno je da je “Share by link” uključen.

  • Ukoliko promenite google sheet morate da sredite kolone u skladu sa tim.

  • Ukoliko želite da koristite excel potreban vam je drugi paket za uvoz tih podataka, a to je readxl::read_xlsx().

  • Ako je novi excel fajl, treba proveriti da li treba sredjivati podatke ili ne.

Dodavanje linkova

repopsi1 <-repopsi
# Koristi se za dodavanje linkova na več postojeće informacije u koloni (to je važno za funkciju datatable)

repopsi1$`Source of the original instrument` <- ifelse(is.na(repopsi1$`Source of the original instrument`), 
                                                       
NA, paste0("<a href='", repopsi1$`Source of the original instrument`, "' target='_blank'>",
                           
repopsi1$`Source of the original instrument`, " </a>"))

# Koristi se za pretvaranje u aktivni link za slanje na email adresu u koloni
repopsi1$`Contact email address` <- ifelse(is.na(repopsi1$`Contact email address`  ),
                                                                 
NA, paste0("<a href='mailto:",repopsi1$`Contact email address`  , "' target='_blank'>",
                                                                            
repopsi1$`Contact email address`  ,"</a>"))

Spajanje kolona i uklanjanje nepotrebnih

repopsi1<- repopsi1%>%
  
  unite(`Instrument name and version`, `Title in English`, Abbreviation, Version, sep = " | ",remove = FALSE, na.rm = TRUE)%>%
  
  select(-c(`Title in English`,Abbreviation,Version))%>%
  
  unite(`Contact person`, `Contact person`, `Contact email address`, sep = " | ",remove = FALSE, na.rm = TRUE) %>%
  
  select(-`Contact email address`) %>%
  
  unite(`Where to find the instrument?`, `Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`, sep = " | ",remove = FALSE,na.rm = TRUE)%>%
  
  select(-c(`Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`))

Menjanje redosleda kolona

repopsi1<- repopsi1%>%
  
  relocate(`Where to find the instrument?`, .after = `Instrument name and version`) %>%
  
  relocate(`Citation of the original instrument`, .after = `Where to find the instrument?`) %>%
  
  relocate(`Citation of the translation/adaptation`, .after = `Citation of the original instrument`) %>%
  
  relocate(Keywords, .after = `Citation of the translation/adaptation`) %>%
  
  relocate(`Contact person`, .after = Keywords)

Originalna tabela i url za skidanje CSV podataka sa drugog sajta

  #repopsi duplicate for download 

repopsi2 <-repopsi

repopsi2$ID  <-seq.int(nrow(repopsi2))

#URL for CSV download of all data

URL <- "https://osf.io/download/mxrc2/"

UI kod

UI kod

UI se, u slučaju repopsi aplikacije, sastoji od navbarPage koja ima sidebarPanel sa leve i mainPanel sa desne strane. Na ovaj način se uredjuje raspored elemenata aplikacije.

Pre samog sadržaja ovih panela postoji deo koji definiše temu, javaskript koji je važan za global pretragu tabele i css koji uredjuje boje, veličinu slova same aplikacije.

Tema i javaskript

Sadržaj myscript.js

www folder

U ovom trenutku bismo pomenuli da www folder postoji da bi se u njega ubacile slike (logoi i slično), ako je kompleksniji css fajl ili javaskript.

Uredjivanje estetike aplikacije

Postoji više načina kako može da se uredjuje aplikacija. Može da se direktno primeni CSS ili HTML ili postoje već neke funkcije u shiny-u koje obavljaju upravo to. Prvo ćemo vam prikazati deo koji se odnosi na sredjivanje estetike a koji se sastoji od CSS-a. Sa tags$ mogu da se uredjuju specifični delovi aplikacije.

Uredjivanje estetike aplikacije

Neke od funkcija HTML5

  • strong() boldovan tekst

  • a(“tekst”/slika, href=“link”) linkovan tekst

  • h2(),h3(),h4(),h5(), h6() tekst različitog nivoa

  • br() razmak izmedju teksta

  • img() slika

  • HTML() direktno povlači string karaktera kao HTML kod

UI widget-i i reaktivni output-i

Najvažniji deo ui predstavljaju razni widget-i ili reaktivni output-i. To su dakle različite vrste opcija gde se ili unose odredjeni podaci, ili gde će se pojaviti odredjeni grafikon/tabela a zatim se na server strani od tih unosa u realnom vremenu prikazuju tabele, grafikoni, skidaju podaci u vidu output-a. Na ovaj način se obezbedjuje interaktivnost.

Svaki widget ili reaktivni output ima svoj id koji mu vi dodeljujete i jako je važno da zapamtite kako ste ga nazvali.

U sidebarPanel-u ove aplikacije ima 4 widget-a (unos teksta za filtriranje i tri dugmeta za skidanje podataka) a u glavnom panelu jedan reaktivni output (tabela).

UI widget-i i reaktivni output

sidebarPanel

  • tags$input sa id global_filter
  • downloadBttn sa id downloadfilterxlsx
  • downloadBttn sa id downloadalldatacsv
  • downloadBttn sa id downloadalldataxlsx

mainPanel

  • dataTableOutput sa id tablerepopsi

Server kod

Aktiviranje tabele

HTML tabela

Aktiviranje skidanja filtriranih podataka

Aktiviranje skidanja svih podataka csv

Aktiviranje skidanja svih podataka excel

Objavljivanje aplikacije na Shinyapps.io

Objavljivanje aplikacije na Shinyapps.io

Da biste objavili aplikaciju na Shinyapps.io potrebno je da otvorite nalog. Najbolje objašnjen način korak po korak kako da objavite aplikaciju na shinyapp je na sledećem linku. Tu se nalaze informacije kako da povežete shinyapp nalog sa vašim lokalnim kompjuterom.

Objavljivanje aplikacije na Shinyapps.io iz RStudio-a

Kada ste obavili povezivanje Shinyapps.io i Rstudio-a, vratite se na vašu aplikaciju u RStudio-u. Kliknite na plavu Publish ikonu u gornjem desnom uglu.

Objavljivanje aplikacije na Shinyapps.io iz RStudio-a

Izaberite fajlove koji su potrebni da se objave. U slučaju repopsi aplikacije to je www folder koji sadrži dva logo-a i javaskript fajl i app.R fajl. Takodje, u ovom koraku birate i nalog koji ste povezali sa shinyapps.io. I kliknite na Publish.

Bravo!

Korisni linkovi i kontakt

Hvala mnogo na pažnji!